<template>
  <div >
    <van-swipe :autoplay="3000">
      <van-swipe-item
        v-for="(item, index) in arr"
        :key="index"
        class="zhuzhuzhu"
        @click="jr(item)"
      >
        <div>
          <!-- 图片 -->
          <div class="aaax">
            <img :src="item.titleImg" />
          </div>
          <!-- 标题 -->
          <div class="biaoti">
            <div class="biaoti2">
              <span> {{ item.title }} </span>
            </div>
            <div class="suoying">
              <!-- 索引 -->
              <span>{{ index + 1 > 10 ? index + 1 : "0" + (index + 1) }}</span>
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "TuiJian",
  data() {
    return {
      arr: [],
    };
  },
  methods:{
    jr(item){
      this.$router.push({
        name:'homecontent',
        params:{
          homeneirong:item
        }
      })
    }
  },
  mounted() {
    axios.get("http://localhost:8080/hardnews/hardnewsall").then((res) => {
      this.arr = res.data.data;
    });
  },
};
</script>

<style scoped>
.zhuzhuzhu {
  background-color: aliceblue;
}

.aaax {
  width: 100%;
  height: 25vh;
}

.aaax > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0px 0px;
}
.biaoti {
  height: 9vh;
  display: flex;
  flex-direction: column;
  margin: 5px 10px;
}
.biaoti2 {
  font-size: 20px;
  font-weight: 600;
}
.suoying {
  display: flex;
  justify-content: flex-end;
  font-weight: 600;
  color: red;
}
</style>